<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script src="constant.js" type="text/javascript"></script>
    <link rel="stylesheet" type="text/css" href="database-detail.css"/>
</head>
<body>
<div id="mybody">
    <div id="content">
        <div class="content-item connect">
            <p style="background: #9A0C19;width:100%;">数据库基本信息</p>
            <table class="altrowstable">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
                <tr>
                    <td id="db-con">连接信息</td>
                    <td id="version">数据库版本</td>
                </tr>
                <tr>
                    <td id="mySqlHome">环境变量</td>
                    <td id="basedir">实际位置</td>
                </tr>
                <tr>
                    <td id="datadir">数据位置</td>
                    <td id="dbSize">数据大小</td>
                </tr>
            </table>
        </div>
        <div class="content-item  menu"></div>


        <div class="content-item variables-list dbSize">
            <p style="background: #9A0C19;width:100%;">数据库大小</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>
        <h1></h1>
        <div class="content-item variables-list charMap">
            <p style="background: #9A0C19;width:100%;">编码信息</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>

        <h1></h1>
        <div class="content-item variables-list logError">
            <p style="background: #9A0C19;width:100%;">错误日志</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>
        <h1></h1>
        <div class="content-item variables-list logBin">
            <p style="background: #9A0C19;width:100%;">二进制日志</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>
        <h1></h1>
        <div class="content-item variables-list generalLog">
            <p style="background: #9A0C19;width:100%;">通用日志</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>

        <div class="content-item variables-list slowQueryLog">
            <p style="background: #9A0C19;width:100%;">慢查询日志</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>

        <div class="content-item variables-list maxConnecttion">
            <p style="background: #9A0C19;width:100%;">最大连接数</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>

        <div class="content-item variables-list threads">
            <p style="background: #9A0C19;width:100%;">线程数</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>

        <div class="content-item variables-list tableLock">
            <p style="background: #9A0C19;width:100%;">表锁</p>
            <table class="altrowstable half">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>


        <div class="content-item variables-list other">
            <p style="background: #9A0C19;width:100%;">其他信息</p>
            <table class="altrowstable long">
                <tr>
                    <td>名称</td>
                    <td>值</td>
                </tr>
            </table>
        </div>
    </div>
</div>
<script>
$(document).ready(function () {
    showDbDetail();
    altRows();
});

/**
 * 显示数据库详情
 */
function showDbDetail() {
    $.ajax({
        url: AppUrl + '/db_meta/test',//跨域请求的URL
        type: "GET",
        dataType: "json",
        contentType: "application/json;charset=UTF-8",
        success: function (data) {
            $.each(data, function (name, item) {
                if (name == "data") {
                    let basicInfo = item.basicInfo;
                    $("#db-con").html(`名称：${basicInfo.name} ip地址：${basicInfo.ip} 数据库： ${basicInfo.database} 端口：${basicInfo.port} 用户名：${basicInfo.userName}`);

                    $.each(item, function (bjectName, objectValue) {
                        if(bjectName == "mySqlHome")
                            $("#mySqlHome").html("环境变量："+objectValue)

                        if(bjectName == "basedir")
                            $("#basedir").html("实际位置："+objectValue)

                        if(bjectName == "version")
                            $("#version").html("版本："+objectValue)

                        if(bjectName == "dataDir")
                            $("#datadir").html("数据存储位置："+objectValue)

                        if(bjectName == "dbSize")
                            showVariables("dbSize",objectValue);

                        if(bjectName == "charMap")
                            showVariables("charMap",objectValue);

                        if(bjectName == "logError")
                            showVariables("logError",objectValue)

                        if(bjectName == "logBin")
                            showVariables("logBin",objectValue)

                        if(bjectName == "generalLog")
                            showVariables("generalLog",objectValue)

                        if(bjectName == "slowQueryLog")
                            showVariables("slowQueryLog",objectValue)

                        if(bjectName == "maxConnecttion")
                            showVariables("maxConnecttion",objectValue)

                        if(bjectName == "threads")
                            showVariables("threads",objectValue)

                        if(bjectName == "tableLock")
                            showVariables("tableLock",objectValue)

                        if(bjectName == "variables")
                            showVariables("other",objectValue)
                    });
                }
            });
            altRows();
        },
        error: function (reason) {
            console.log(reason)
        }
    });
}

function showVariables(htmlId,variables) {
    $.each(variables, function (bjectName, objectValue) {
        var itemData = "<tr>";
        itemData += "<td>" + bjectName + "</td>";
        itemData += "<td>" + objectValue + "</td>";
        itemData += "</tr>";
        $("."+htmlId+" table").append(itemData);
    });
}



</script>
</body>
</html>